<template>
  <bfs-dec-std ref="decRef" :field-options="fieldOption" :line-field-options="fieldOptionLine">
    <template v-slot:btnDropdownSlot="props">
      <q-item clickable v-close-popup @click="customsCheckBegin(props.data.decId)">
        <q-item-section avatar>
          <q-icon name="fiber_manual_record"></q-icon>
        </q-item-section>
        <q-item-section>
          <q-item-label>开始查验</q-item-label>
        </q-item-section>
      </q-item>
      <q-item clickable v-close-popup @click="customsCheckFinish(props.data.decId)">
        <q-item-section avatar>
          <q-icon name="fiber_manual_record"></q-icon>
        </q-item-section>
        <q-item-section>
          <q-item-label>查验完成</q-item-label>
        </q-item-section>
      </q-item>
      <q-item clickable v-close-popup @click="customsCheckBackout(props.data.decId)">
        <q-item-section avatar>
          <q-icon name="fiber_manual_record"></q-icon>
        </q-item-section>
        <q-item-section>
          <q-item-label>取消查验</q-item-label>
        </q-item-section>
      </q-item>
      <q-item clickable v-close-popup @click="decPremit(props.data.decId)">
        <q-item-section avatar>
          <q-icon name="fiber_manual_record"></q-icon>
        </q-item-section>
        <q-item-section>
          <q-item-label>放行</q-item-label>
        </q-item-section>
      </q-item>
    </template>
  </bfs-dec-std>
  <q-dialog transition-hide="none" transition-show="none" v-model="showingCheckBeginDlg">
    <q-card style="max-width: 400px; width: 100%">
      <q-card-section class="q-pa-sm">
        <div class="text-h6">开始查验</div>
      </q-card-section>
      <q-banner class="text-white bg-red" dense inline-actions v-if="serverErrorMessageCheck">
        {{ serverErrorMessageCheck }}
        <template v-slot:action>
          <q-btn @click="serverErrorMessageCheck = ''" dense flat icon="close" size="sm" />
        </template>
      </q-banner>
      <q-separator />
      <q-card-section class="q-pa-sm">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-icon color="red" name="fas fa-asterisk" size="10px" />
            <span>查验开始时间</span>
            <easy-input v-model="$d.checkDt" :error="v$.checkDt.$error" :error-message="e$(v$.checkDt.$errors)"
              use-time-picker use-date-picker append-icon-show :readonly="customsCheckState"/>
          </div>
        </div>
      </q-card-section>
      <q-separator class="separator" />
      <q-card-actions align="right">
        <q-btn  @click="doCustomsCheckBegin" color="primary" label="确定" :loading="customsCheckState" />
        <q-btn color="primary" label="取消" unelevated v-close-popup outline :disable="customsCheckState" />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <q-dialog transition-hide="none" transition-show="none" v-model="showingCheckFinishDlg">
    <q-card style="max-width: 400px; width: 100%">
      <q-card-section class="q-pa-sm">
        <div class="text-h6">查验完成</div>
      </q-card-section>
      <q-banner class="text-white bg-red" dense inline-actions v-if="serverErrorMessageCheck">
        {{ serverErrorMessageCheck }}
        <template v-slot:action>
          <q-btn @click="serverErrorMessageCheck = ''" dense flat icon="close" size="sm" />
        </template>
      </q-banner>
      <q-separator />
      <q-card-section class="q-pa-sm">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <span>报关单序号</span>
            <easy-input v-model="$d.decId" readonly/>
          </div>
          <div class="col-12">
            <q-icon color="red" name="fas fa-asterisk" size="10px" />
            <span>查验完成时间</span>
            <easy-input v-model="$d.checkDt" :error="v$.checkDt.$error" :error-message="e$(v$.checkDt.$errors)"
              use-time-picker use-date-picker append-icon-show :readonly="customsCheckState"/>
          </div>
          <div class="col-12">
            <q-icon color="red" name="fas fa-asterisk" size="10px" />
            <span>查验原因</span>
            <easy-input v-model="$d.customsCheckReason" :error="v$.customsCheckReason.$error" :readonly="customsCheckState"
              :error-message="e$(v$.customsCheckReason.$errors)" :maxlength="500" type="textarea" :rows="2"/>
          </div>
        </div>
      </q-card-section>
      <q-separator class="separator" />
      <q-card-actions align="right">
        <q-btn  @click="doCustomsCheckFinish" color="primary" label="确定" :loading="customsCheckState" />
        <q-btn color="primary" label="取消" unelevated v-close-popup outline :disable="customsCheckState" />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <q-dialog transition-hide="none" transition-show="none" v-model="decPremitDlg">
    <q-card style="max-width: 400px; width: 100%">
      <q-card-section class="q-pa-sm">
        <div class="text-h6">报关单放行</div>
      </q-card-section>
      <q-banner class="text-white bg-red" dense inline-actions v-if="serverErrorMessageCheck">
        {{ serverErrorMessageCheck }}
        <template v-slot:action>
          <q-btn @click="serverErrorMessageCheck = ''" dense flat icon="close" size="sm" />
        </template>
      </q-banner>
      <q-separator />
      <q-card-section class="q-pa-sm">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-icon color="red" name="fas fa-asterisk" size="10px" />
            <span>放行时间</span>
            <easy-input v-model="$d.checkDt" :error="v$.checkDt.$error" :error-message="e$(v$.checkDt.$errors)"
                use-time-picker use-date-picker append-icon-show :readonly="customsCheckState"/>
          </div>
        </div>
      </q-card-section>
      <q-separator class="separator" />
      <q-card-actions align="right">
        <q-btn  @click="doPremitBegin" color="primary" label="确定" :loading="customsCheckState" />
        <q-btn color="primary" label="取消" unelevated v-close-popup outline :disable="customsCheckState" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
export default {
  name: 'Dec'
}
</script>

<script lang="ts" setup>
import {computed, reactive, ref} from 'vue'
import useVuelidate from '@vuelidate/core'
import dayjs from 'dayjs'
import {FieldOptionsDef} from '@njt/bfs/defs/comm'

const fieldOption: FieldOptionsDef = {
  userDef1: {
    isShown: true,
    label: '放行时间'
  },
  userDef2: {
    isShown: true,
    label: '放行状态'
  },
  userDef3: {
    isShown: true
  },
  userDef4: {
    isShown: true
  },
  userDef5: {
    isShown: true
  },
  userDef6: {
    isShown: true
  },
  userDef7: {
    isShown: true
  },
  userDef8: {
    isShown: true
  },
  userDef9: {
    isShown: true
  },
  userDef10: {
    isShown: true
  },
  userDef11: {
    isShown: true
  },
  userDef12: {
    isShown: true
  },
  userDef13: {
    isShown: true,
    label: '开始查验时间'
  },
  userDef14: {
    isShown: true,
    label: '查验结束时间'
  },
  userDef15: {
    isShown: true,
    label: '查验原因'
  }
}

const fieldOptionLine: FieldOptionsDef = {
  userDef1: {
    isShown: true
  },
  userDef2: {
    isShown: true
  },
  userDef3: {
    isShown: true
  },
  userDef4: {
    isShown: true
  },
  userDef5: {
    isShown: true
  },
  userDef6: {
    isShown: true
  },
  userDef7: {
    isShown: true
  },
  userDef8: {
    isShown: true
  },
  userDef9: {
    isShown: true
  },
  userDef10: {
    isShown: true
  }
}

// 报关单开始查验

const $d = reactive({
  decId: null as number | null,
  checkDt: '',
  customsCheckReason: ''
})
const validators = $f.validators
const rule = {
  checkDt: {
    datetime: validators.datetime,
    required: validators.required
  },
  customsCheckReason: {
    required: validators.requiredIf(computed(() => showingCheckFinishDlg.value))
  }
}

const v$ = useVuelidate(rule, computed(() => $d), {$autoDirty: true, $scope: false})

let showingCheckBeginDlg = ref(false)
let customsCheckState = ref(false)
let serverErrorMessageCheck = ref('')
let decPremitDlg = ref(false)

const decPremit = (decId: number) => {
  serverErrorMessageCheck.value = ''
  $d.decId = decId
  let minutes = dayjs().get('minute')
  $d.checkDt = dayjs().minute(Math.ceil(minutes/5)*5).format('YYYY-MM-DD HH:mm')
  v$.value.$reset()
  decPremitDlg.value = true
  if(decRef.value.form.userDef1){
    $d.checkDt = $f.fmt.dtFmtFullNoSec(decRef.value.form.userDef1)
  }
}

const customsCheckBegin = function (decId: number) {
  serverErrorMessageCheck.value = ''
  $d.decId = decId
  let minutes = dayjs().get('minute')
  $d.checkDt = dayjs().minute(Math.ceil(minutes/5)*5).format('YYYY-MM-DD HH:mm')
  v$.value.$reset()
  showingCheckBeginDlg.value = true
}

let showingCheckFinishDlg = ref(false)
const customsCheckFinish = function (decId: number) {
  serverErrorMessageCheck.value = ''
  $d.decId = decId
  $d.customsCheckReason = ''
  let minutes = dayjs().get('minute')
  $d.checkDt = dayjs().minute(Math.ceil(minutes/5)*5).format('YYYY-MM-DD HH:mm')
  v$.value.$reset()
  showingCheckFinishDlg.value = true
}

const doPremitBegin = () => {
  serverErrorMessageCheck.value = ''
  v$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        customsCheckState.value = true
        let formParams = {
          decId: $d.decId,
          permitDt: $d.checkDt
        }
        $f.axios
            .get('/project/mhlbc/work/dec/dec-permit', {params: formParams})
            .then(() => {
              decPremitDlg.value = false
              $f.ui.showNotifySucceeded('操作成功')
              decRef.value.loadModelData()
            })
            .catch((err) => {
              serverErrorMessageCheck.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              customsCheckState.value = false
            })
      }
    })
}

const customsCheckBackout = function (decId: number) {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确定要取消报关单查验吗?',
    icon: 'Question',
    buttons: 'OkCancel',
    delayClose: true,
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/project/mhlbc/work/dec/dec-customs-check-backout/'+decId)
        .then(() => {
          $f.ui.closeMsgBox()
          decRef.value.loadModelData()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '操作失败',
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close',
          })
        })
    }
  })
}

let decRef = ref<any>()

const doCustomsCheckBegin = function () {
  serverErrorMessageCheck.value = ''
  v$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        customsCheckState.value = true
        let formParams = {
          decId: $d.decId,
          customsCheckBeginDt: $d.checkDt
        }
        $f.axios
          .get('/project/mhlbc/work/dec/dec-customs-check-begin', {params: formParams})
          .then(() => {
            showingCheckBeginDlg.value = false
            decRef.value.loadModelData()
          })
          .catch((err) => {
            serverErrorMessageCheck.value = $f.getAxiosErrMsg(err)
          })
          .finally(() => {
            customsCheckState.value = false
          })
      }
    })
}

const doCustomsCheckFinish = function () {
  serverErrorMessageCheck.value = ''
  v$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        customsCheckState.value = true
        let formParams = {
          decId: $d.decId,
          customsCheckEndDt: $d.checkDt,
          customsCheckReason: $d.customsCheckReason
        }
        $f.axios
          .get('/project/mhlbc/work/dec/dec-customs-check-end', {params: formParams})
          .then(() => {
            showingCheckFinishDlg.value = false
            decRef.value.loadModelData()
          })
          .catch((err) => {
            serverErrorMessageCheck.value = $f.getAxiosErrMsg(err)
          })
          .finally(() => {
            customsCheckState.value = false
          })
      }
    })
}

const e$ = $f.getFieldErrStr
</script>

<style scoped>

</style>
